<template>
  <vuep v-model="value" :options="cmOptions" ref="code" style="height:600px;width:100%"></vuep>
</template>
<script>
import "codemirror/theme/monokai.css";
import "codemirror/mode/vue/vue";
import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css';
Vue.use(Vuep /*, { codemirror options } */)
let strVue = `<style>\n\n<\/style>\n\n<template>\n\t<div>\n\t\t<Alert show-icon>当前 View UI（iView）版本为 4.1.3</Alert>\n\t<\/div>\n<\/template>\n\n<script>\n
export default {\n\t\tdata () {\n\t\t\treturn {\n\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\n\t\t},\n\t\tmounted () {\n\n\t\t}\n\n\t}\n<\/script>\n\n`;
export default {
  name: "CODEMIRROR",
  data() {
    return {
      cmOptions: {
        mode: "text/x-vue",
        // mode:"javascript",
        tabSize: 2,
        theme: "monokai",
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        lineWrapping: true,
        matchBrackets: true,
        styleActiveLine: true,
        cursorHeight: 1, // 光标高度
        dragDrop: true,
        autoRefresh: true,
        extraKeys: { "Ctrl-Space": "autocomplete" },
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
      },
      value: strVue
    };
  },
  computed: {},
  components: {},
  mounted() {
    this.initCode();
  },
  methods: {
    initCode() {},
    resetCode() {
      this.value = strVue;
    }
  }
};
</script>

